RootZanli & NinjaCr3

: / home / o5t6x7pgljbm / public_html / admin / resources / views / School / Statistics /
Filename : attendance-weekly.blade.php
back
@php
    $chart_loader_id = 'attendance-weekly-loader'. App\Libraries\Helpers::getNumericUUID();
@endphp
<div class="col s6 m6 l6" >
    <div class="card animate fadeRight">
        <div class="padding-3" style="position: relative;">
             <!-- Navigation Buttons -->
             <div class="chart-nav-buttons" style="position: absolute; top: 10px; left: 10px; z-index: 10; display: flex; gap: 5px;">
                <!-- Previous Button -->
                <button class="btn-floating blue lighten-1 waves-effect waves-light" id="weekly-previous-btn" title="Previous">
                    <i class="material-icons">chevron_left</i>
                </button>
                <!-- Next Button -->
                <button class="btn-floating green lighten-1 waves-effect waves-light" id="weekly-next-btn" title="Next" disabled>
                    <i class="material-icons">chevron_right</i>
                </button>
            </div>

            @include('School.Statistics.partials.chart-loader', ['loader_id' => $chart_loader_id])
            <canvas id="attendance-weekly"></canvas>
        </div>
    </div>
</div>

@push('component-script')
<style>
    /* Customize disabled button appearance */
    .btn-floating:disabled {
        background-color: #bdbdbd !important; /* Light Gray */
        cursor: not-allowed; /* Show not-allowed cursor */
        opacity: 0.7; /* Reduce opacity to indicate disabled state */
    }
</style>
@endpush

@once
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
<script src="{{ asset('app-assets/js/chart-v4.4.3.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels">

</script>
@endonce
@push('component-script')
<script>
    // Colors suggestions:

    // Light Gray
    // backgroundColor: 'rgba(169, 169, 169, 0.2)',
    // borderColor: 'rgba(169, 169, 169, 1)',

    // Muted Yellow
    // backgroundColor: 'rgba(255, 206, 86, 0.2)',
    // borderColor: 'rgba(255, 206, 86, 1)',

    // Light Brown
    // backgroundColor: 'rgba(210, 180, 140, 0.2)',
    // borderColor: 'rgba(210, 180, 140, 1)',

    // Dark Cyan
    // backgroundColor: 'rgba(72, 209, 204, 0.2)',
    // borderColor: 'rgba(72, 209, 204, 1)',



    Chart.register(ChartDataLabels);
    // Weekly Attendance Chart Initialization
    const ctxWeekly = document.getElementById('attendance-weekly').getContext('2d');
    let weeklyChart = null;
    let weeklyStartDate = moment().subtract( 7 * 10, 'days').format('YYYY-MM-DD');
    let weeklyEndDate = moment().format('YYYY-MM-DD');

    function fetchWeeklyChartData() {
        showChartLoader('{{$chart_loader_id}}');
        fetch(`{{ route("schools.stats.weekly-data") }}?start_date=${weeklyStartDate}&end_date=${weeklyEndDate}`)
            .then(response => response.json())
            .then(data => {
                const weeklyLabels = data.labels; // Labels for months (e.g., January, February)
                const weeklyData = data.data;    // Data for groups (array of objects for each month)
                if (weeklyChart) {
                    weeklyChart.destroy(); // Destroy the old chart instance before creating a new one
                }
                weeklyChart = new Chart(ctxWeekly, {
                    type: 'bar',
                    data: {
                        labels: weeklyLabels,
                        datasets: [
                            {
                                label: 'Present',
                                data: weeklyData.map(data => data.presentPercentage),
                                backgroundColor: 'rgba(75, 192, 192, 0.2)',
                                borderColor: 'rgba(75, 192, 192, 1)',
                                borderWidth: 1,

                            },
                            {
                                label: 'Absent',
                                data: weeklyData.map(data => data.absentPercentage),
                                backgroundColor: 'rgba(255, 99, 132, 0.2)',
                                borderColor: 'rgba(255, 99, 132, 1)',
                                borderWidth: 1,
                                hidden:true
                            },
                            {
                                label: 'Holiday',
                                data: weeklyData.map(data => data.holidayPercentage),
                                backgroundColor: 'rgba(153, 102, 255, 0.2)',
                                borderColor: 'rgba(153, 102, 255, 1)',
                                borderWidth: 1,
                                hidden:true
                            },
                            {
                                label: 'N/A',
                                data: weeklyData.map(data => data.NAPercentage),
                                backgroundColor: 'rgba(169, 169, 169, 0.2)', // Light Gray
                                borderColor: 'rgba(169, 169, 169, 1)',
                                borderWidth: 1,
                                hidden:true
                            }
                        ]
                    },
                    options: {
                        // maintainAspectRatio: false
                        responsive: true,
                        scales: {
                            y: {
                                // max: 120,
                                stacked: true,
                                ticks: {
                                    beginAtZero: true,
                                    callback: function(value) {
                                        return value + '%'; // Display percentage on the y-axis
                                    }
                                },
                                title: {
                                    display: true,
                                    text: 'Attendance Percentage'
                                }
                            },
                            x: {
                                stacked: true
                            }
                        },
                        plugins: {
                            legend: {
                                display: true,
                                labels: {
                                    // Show only the legend for "Present"
                                    // filter: function(legendItem) {
                                    //     return legendItem.text === 'Present'; // Replace 'Present' with the label you want to display
                                    // }
                                }
                            },
                            tooltip: {
                                callbacks: {
                                    // Customize the tooltip to show percentages
                                    label: function(context) {
                                        // const total = context.dataset.data.reduce((acc, val) => acc + val, 0);
                                        // const percentage = (context.raw / total) * 100;
                                        // return context.dataset.label + ': ' + percentage.toFixed(2) + '%';
                                        return context.dataset.label + ': ' + context.raw + '%';
                                    }
                                }
                            },
                            title: {
                                display: true,
                                text: 'Weekly Attendance Percentage Over Last 10 Weeks'
                            }
                        }
                    }
                });
                hideChartLoader('{{$chart_loader_id}}');
            })
            .catch(error => {
                console.error('Error fetching chart data:', error);
                hideChartLoader('{{$chart_loader_id}}');
            });
    }

    // Fetch data when the page loads
    document.addEventListener('DOMContentLoaded', function () {
        fetchWeeklyChartData();

        document.getElementById('weekly-previous-btn').addEventListener('click', function () {
            weeklyStartDate = moment(weeklyStartDate).subtract(7*10, 'days').format('YYYY-MM-DD');
            weeklyEndDate = moment(weeklyEndDate).subtract(7*10, 'days').format('YYYY-MM-DD');
            fetchWeeklyChartData();
            document.getElementById('weekly-next-btn').disabled = false; // Enable "Next" button
        });

        document.getElementById('weekly-next-btn').addEventListener('click', function () {
            const newStartDate = moment(weeklyStartDate).add(7*10, 'days').format('YYYY-MM-DD');
            const newEndDate = moment(weeklyEndDate).add(7*10, 'days').format('YYYY-MM-DD');

            // Prevent navigating to future dates
            if (moment(newEndDate).isAfter(moment())) {
                this.disabled = true;
                return;
            }

            weeklyStartDate = newStartDate;
            weeklyEndDate = newEndDate;
            fetchWeeklyChartData();
        });
    });
</script>
@endpush